<template>
  <div class="mine">
    <!-- <img src="../../assets/images/mine-img.png" alt=""> -->
    <div class="min-img">
      <ul>
        <li class="info-img">
          <div class="info-img-box">
            <img  v-if="infoData.avatar" :src="infoData.avatar" alt="">
          </div>
        </li>
        <li class="info-content">
          <span class="info-content-name" v-if="infoData.nickname">{{infoData.nickname}}</span>
          <span class="info-content-edit" v-if="infoPhone&&infoData.mobiles[0].proven == false">{{infoPhone}}&nbsp;(未认证)</span>
          <span class="info-content-edit" v-if="infoPhone&&infoData.mobiles[0].proven == true">{{infoPhone}}&nbsp;(已认证)</span>
          <!-- <span class="info-content-edit">
            <span v-if="infoData.mobiles[0].proven == false" @click="tonext('/verification')" style="color:#ee598b;font-weight:bold;">手机号未验证</span>
            <span v-if="infoData.mobiles[0].proven == true" style="color:#0eac69;font-weight:bold;">手机号已验证</span>
          </span> -->
          <span class="info-content-edit" @click="tonext('/edit')">
            <span style="color:#ee598b;font-weight:bold;margin-top: .1rem;">查看并编辑个人信息</span>
          </span>
        </li>
        <!-- <li class="info-news">
          <div class="news-icon">
            <i class="icon-color iconfont icon-tongzhi"></i>
            <span class="new-tips">3</span>
          </div>
        </li> -->
      </ul>
    </div>
    <div class="min-content-list">
      <div class="type-list" @click="tel" style="margin-top: 0;">
        <div class="type-list-img" style="background:#3B5998"><img src="@/assets/images/tel.png" alt=""></div>
        <div class="type-list-text">联系物业</div>
        <div class="type-list-more"><i class="icon-Color iconfont icon-youjiantou"></i></div>
      </div>
      <div class="type-list" @click="tonext('/addHome')">
        <div class="type-list-img"><img src="@/assets/images/mine-pay.png" alt=""></div>
        <div class="type-list-text">添加房产</div>
        <div class="type-list-more"><i class="icon-Color iconfont icon-youjiantou"></i></div>
      </div>
      <div class="type-list" @click="tomyhome(1)">
        <div class="type-list-img" style="background:#6266F9"><img src="@/assets/images/mine-property.png" alt=""></div>
        <div class="type-list-text">我的物业</div>
        <div class="type-list-more"><i class="icon-Color iconfont icon-youjiantou"></i></div>
      </div>
      <div class="type-list" @click="tonext('/collection')">
        <div class="type-list-img" style="background:#57c5c6"><img src="@/assets/images/mine-pay.png" alt=""></div>
        <div class="type-list-text">我的收藏</div>
        <div class="type-list-more"><i class="icon-Color iconfont icon-youjiantou"></i></div>
      </div>
      <div class="type-list" @click="markPopup">
        <div class="type-list-img" style="background:#FD5585"><img src="@/assets/images/mine-about.png" alt=""></div>
        <div class="type-list-text">关于飞居</div>
        <div class="type-list-more"><i class="icon-Color iconfont icon-youjiantou"></i></div>
      </div>
      <div class="type-list" @click="showPopup">
        <div class="type-list-img" style="background:#4FE7AF"><img src="@/assets/images/mine-share.png" alt=""></div>
        <div class="type-list-text">介绍给朋友</div>
        <div class="type-list-more"><i class="icon-Color iconfont icon-youjiantou"></i></div>
      </div>
    </div>
    <div>
    <van-popup   v-model="show">
      <i class="icon-icon iconfont icon-pointto"></i>
      <div class="popup-box">
        <div  class="mintips-box">
          <span class="min-tips">
            请点击右上角<br/>分享您的内容
          </span>
        </div>
      </div>
    </van-popup>
    <van-popup   v-model="mark">
      <div class="popup-box">
        <div  class="mintips-box">
          <img src="../../assets/images/mine-about.png" alt=""><br/>
          <span class="mark-tips">
            飞居&nbsp;V2.0<br/>满足您的理想品质生活
          </span>
        </div>
      </div>
    </van-popup>
    </div>
  </div>
</template>
<script>
import wx from 'weixin-js-sdk'
import api from '../../api/api.js'
import { Popup } from 'vant';
export default {
  data(){
    return{
      show:false,
      mark:false,
      showtips:false,
      host: api.host,
      infoData: [],
      newData:[],
      infoPhone: '',
      mobile:''
    }
  },
  created(){
    this.getinfo()
    this.getmobile()
  },
  watch:{
    $route(to, from) {
      if(to.fullPath=='/mine') {
        this.getinfo()
      }
    }
  },
  methods:{
    showPopup() {
      this.show = true;
      this.showtips = true;
    },
    markPopup() {
      this.mark = true;
    },
    // 物业电话
    getmobile(){
      this.$get(api.getmobile, {})
      .then((response) => {
        if(response.data.code==1){
          this.mobile = response.data.data.list.phone
        }
      })
      .catch((error) => {
        console.log(error)
      });
    },
    tel(){
      if(this.mobile){
        window.location.href = `tel:${this.mobile}`
      }else{
        this.$toast('此物业暂未设置联系电话')
      }
    },
    tocollection(){
      this.$router.push('/collection')
    },
    tonext(path){
      this.$router.push(path)
    },
    tomyhome(sign){
      this.$router.push({
        path: '/myHome',
        query: {
          sign
        }
      })
    },
   //获取用户资料
    getinfo(){
      this.$get(api.info, {})
      .then((response) => {
        this.infoData = response.data.data
        this.infoPhone = response.data.data.defaultMobile
      })
      .catch((error) => {
        console.log(error)
      });
    },
    tocollection(){
      this.$router.push('/collection')
    }
  },
  components:{
    [Popup.name]:Popup
  }
}
</script>
<style>
.mine .van-popup{
  background: none;
}
.mine .van-popup--center{
  top: 45%;
}
</style>

<style scoped>
.mine{
  width: 100%;
  min-height: 100vh;
  background: #fff;
}
.min-img{
  width: 100%;
  height: 3.8rem;
  background: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1303695747,1174932023&fm=26&gp=0.jpg');
  /* background: #FCEFE7; */
  background-size: cover;
}
.info-img-box{
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: .05rem .2rem .1rem;
}
.info-img-box img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.min-img ul{
  padding-top: 15%;
  display: flex;
  margin: 0 .4rem;
  height: 1.6rem;
}
.min-img ul .info-img{
  flex: 1;
}
.min-img ul .info-content{
  flex: 2;
  font-weight: bold;
}
.info-content span:nth-of-type(2),.info-content span:nth-of-type(3){
  display: block;
}
.min-img ul .info-news{
  position: relative;
  flex: 1;
}
.info-content-edit{
  height: .5rem;
  line-height: .5rem;
  color: #000;
}
.info-content-name{
  font-weight: bold;
  height: .6rem;
  line-height: .6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.news-icon{
  position: relative;
  position: absolute;
  right: .5rem;
  top: .28rem;
  width: .8rem;
  height: .8rem;
  line-height: .8rem;
  text-align: center;
  border-radius: 50%;
  background: #fff;
}
.icon-color{
  font-size: .42rem;
  color: #FD5585;
}
.min-content-list{
  width: 100%;
  font-weight: bold;
  height: auto;
  background: #fff;
  border-radius: .5rem .5rem 0 0;
}
.new-tips{
  color: #fff;
  position: absolute;
  top: 0%;
  right: -.1rem;
  width: .32rem;
  height: .32rem;
  line-height: .32rem;
  text-align: center;
  background: #FF001F;
  border-radius: 50%;
}
.type-list{
  margin: .4rem auto 0;
  display: flex;
  width: 88%;
  height: .8rem;
  line-height: .8rem;
  color: #000;
  text-align: center;
}
.type-list-img{
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: #FE9870;
  text-align: center;
}
.type-list-img img{
  width:40%;
  height:40%;
  vertical-align: sub;
}
.type-list-text{
  text-indent: .5rem;
  flex: 5;
  text-align: left;
}
.icon-Color{
  color: #000;
}
.mintips-box{
  margin-top: .3rem;
  padding: .25rem;
  border-radius: .3rem;
  color: #fff;
  border: 1px dashed #ccc;
}
.popup-box{
  text-align: center;
}
.popup-box img{
  width: 1rem;
  height: 1rem;
}
.icon-icon{
  display: block;
  margin: 0 auto;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  text-indent: .5rem;
}
.min-tips{
  display: block;
  font-size: .35rem;
  line-height: .55rem;
}
.icon-tips{
  margin-bottom: .3rem;
  display: block;
  font-size: .8rem;
  color: #fff;
}
</style>

